<template>
  <view class="mine">
    <image class="bg-logo" src="@/static/image/logo_bg.png" />
    <view class="mine-container">
      <view class="user-info">
        <image class="user-info-avatar" :src="userInfo.avatar" />
        <view class="user-info-content">
          <view class="user-info-content-title">{{ userInfo.nickname }}</view>
          <view class="user-info-content-extra">手机号:{{ userInfo.encryptedPhone }}</view>
        </view>
      </view>
      <!-- 计数 -->
      <view class="count-card">
        <view class="card-item">
          <text>{{ collect.totalCount }}</text>
          <text class="card-item-text">收藏</text>
        </view>
        <view class="card-item">
          <text>{{ comment.totalCount }}</text>
          <text class="card-item-text">评价</text>
        </view>
        <view class="card-item">
          <text>0</text>
          <text class="card-item-text">优惠券</text>
        </view>
        <view class="card-item">
          <text>￥{{ order.totalPrice }}</text>
          <text class="card-item-text">我的消费</text>
        </view>
      </view>
      <!-- 图标卡片 -->
      <view class="btn-card">
        <view class="card-item" @click.stop="handleOpenOrderPage(1)">
          <image class="card-item-img" src="@/static/image/mine/order_noPay.png"></image>
          <text class="card-item-text">待付款</text>
          <view class="card-item-dot" v-if="order.statusList[0]">{{ order.statusList[0] }}</view>
        </view>
        <view class="card-item" @click.stop="handleOpenOrderPage(2)">
          <image class="card-item-img" src="@/static/image/mine/order_noUse.png"></image>
          <text class="card-item-text">待使用</text>
          <view class="card-item-dot" v-if="order.statusList[1]">{{ order.statusList[1] }}</view>
        </view>
        <view class="card-item" @click.stop="handleOpenOrderPage(3)">
          <image class="card-item-img" src="@/static/image/mine/order_finish.png"></image>
          <text class="card-item-text">已完成</text>
        </view>
         <view class="card-item" @click.stop="handleOpenOrderPage(4)">
          <image class="card-item-img" src="@/static/image/mine/order_underWay.png"></image>
          <text class="card-item-text">取消/退款</text>
        </view>
      </view>
      <view class="car-card" @click="handleToCarPage">
        <text class="car-card-text">我的车辆</text>
        <image mode="aspectFit" class="car-card-img" src="@/static/image/audi_a4l.png"></image>
      </view>
      <!-- 列表 -->
      <view class="list-card">
        <up-cell title="年检须知" isLink :clickable="false" url="/pages/componentsB/tag/tag"></up-cell>
        <up-cell title="门店入住" isLink :clickable="false" url="/pages/componentsB/tag/tag"></up-cell>
        <up-cell title="服务电话" isLink :clickable="false" @click="handleMakePhoneCall">
          <template #value class="customer-phone">{{ customerServicePhone }}</template>
        </up-cell>
        <up-cell title="意见反馈" isLink :clickable="false" url="/pages/componentsB/tag/tag"></up-cell>
        <up-cell title="关于我们" isLink :clickable="false" url="/pages/componentsB/tag/tag"></up-cell>
        <up-cell title="账户设置" isLink :clickable="false" url="/pages/componentsB/tag/tag"></up-cell>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import API from '@/api'

  onMounted(() => {
    getCount();
  })

  const collect = ref({});
  const order = ref({});
  const comment = ref({});
  const customerServicePhone = ref('023-60368333');
  const userInfo = reactive({
    nickname: '着迷',
    phone: '17358486814',
    encryptedPhone: '173****6814',
    avatar: 'https://thirdqq.qlogo.cn/g?b=sdk&k=oQJibma50FXHgWCIn3R2edA&kti=ZMougwAAAAA&s=140&t=1690964846'
  });

  const handleMakePhoneCall = () => uni.makePhoneCall({ phoneNumber: customerServicePhone.value });

  const handleOpenOrderPage = currentIndex => {
    uni.navigateTo({
      url: `/pages/mine/pages/order/order?tabIndex=${currentIndex}`
    });
  };

  const handleToCarPage = () => {
    uni.navigateTo({
      url: '/pages/mine/pages/car/car'
    });
  };

  const getCount = async () => {
    const collectRes = await API.collect.getCount();
    const orderRes = await API.order.getCount();
    const commentRes = await API.comment.getCount();
    collect.value = collectRes.data;
    order.value = orderRes.data;
    comment.value = commentRes.data;
  }

</script>

<style lang="scss">
  .mine {
    position: relative;
    padding-top: 102rpx;
    // border: 2px solid;
    background: linear-gradient(to bottom, #0055a5 0, #f7f7f7 520rpx);

    .bg-logo {
      position: absolute;
      top: -3%;
      width: 800rpx;
      height: 720rpx;
      right: 0;
    }
    .mine-container {
      padding-top: 80rpx;
      position: relative;

      .user-info {
        padding: 0 24px;
        padding-bottom: 72rpx;
        height: 80px;
        display: flex;
        color: $uni-text-color;

        &-avatar {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }

        &-content {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 16px;

          &-title {
            font-size: 18px;
            font-weight: bold;
          }

          &-extra {
            margin-top: 12px;
            font-size: 13px;
          }
        }
      }

      .count-card {
        // @include card;
        @include flex-row(space-between);
				padding: 0 calc(12px + 12px + 15px);

        &-img {
          height: 38%;
          padding: 4px;
        }

        &-text {
          color: $uni-text-color;
          // margin-top: 8px;
          font-size: 15px;
          font-weight: bold;
        }
      }

      .btn-card {
        @include card;
        @include flex-row(space-between);
        position: relative;
				padding-left: 27px;
				padding-right: 27px;
      }

      .car-card {
        @include card;
        @include flex-row(space-between, center);
        position: relative;
				padding-left: 27px;
				padding-right: 27px;
        height: 80px;
        &-img {
          max-height: 100%;
          width: 256rpx;
          padding: 4px;
					transform: scale(1.5);
        }

        &-text {
          color: $uni-text-color;
          font-size: 15px;
          font-weight: bold;
        }
      }

      .list-card {
        @include card;

        .customer-phone {
          color: #1e7eba;
        }
      }

      .card-item {
        position: relative;
        font-size: 16px;
        @include flex-column(space-between, center);

        &-img {
          @include size(38px);
          padding: 4px;
        }

        &-text {
          color: $uni-text-color;
          font-size: 13px;
        }

        &-dot {
          position: absolute;
          top: 0;
          right: 0;
          padding: 1px;
          @include size(16px);
          line-height: 16px;
          font-size: 10px;
          color: #fff;
          background-color: $uni-color-error;
          border-radius: 50%;
          text-align: center;
        }
      }
    }
  }
</style>
